<template>
  <div id="one-box">
    {{$route.query.id}}
    <h3 class="artist-name">{{artistName}}</h3>
    <!-- <div class="artist-cover">
      <img :src="singerCover" alt="">
    </div> -->
  </div>
</template>

<script>
import { userDetail } from "@/api";
export default {
  name: "singerDetails",
  data() {
    return {
      singerCover:"",
      artistName:"",
    };
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.init();
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      await this.getUserDetail()
    },
    getUserDetail() {
      return userDetail({uid:this.$route.query.id}).then(data=>{
        console.log(data,"此用户信息");
        this.singerCover = data.profile.avatarUrl
        this.artistName = data.profile.artistName
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.artist-name{
  font-size:24px;
  color:#333;
}
</style>